
<%@page import="se.rkrantz.simpleraid.hibernate.domain.WowCharacter"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="joda" uri="http://www.joda.org/joda/time/tags" %>

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Raid</title>
    
    <link rel="stylesheet" type="text/css" href="/css/simpleraid.css" />
    <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.8.16.custom.css" />

    <script type="text/javascript" src="/js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>

    <script type="text/javascript">
	    function loadAvatar(name, div) {
			  $.ajax({
		   	 		type:"GET",
		   	 		url: "getAvatar.html",
		   	 		data: {characterName:name},
		   	 		success:function (data) {
						if (data) {
							$(div).html('<img src="'+data+'" />');
						}
					}
		   	 	});
		  }
    
		$(function() {
			$('#addCharacterDialogButton').button();
	   	  	$('#addCharacterDialogButton').click(function(e) {
	   			showAddCharacter();
   	  		});
	   	 	$('.primaryButton').button();
		   	
   	  		
	   	  	$('#addCharacterDialog').dialog({
	  		  autoOpen: false, 
	  		  width: 400,
	  		  height: 300,
	  		  buttons: {
	  			  Create: function() {
	  				  $('#addCharacterForm').submit();
	  			  }
	  		  }
	  		});
   	  	
	   	 	$.ajax({
	   	 		type:"GET",
	   	 		url: 'userInfo.html',
	   	 		dataType: "json",
	   	 		success:function (data) {
	   	 			$('#userInformationContainer #userName').val(data.userName);
	   	 			$('#userInformationContainer #userEmail').val(data.userEmail);
	   	 		}
	   	 	});
	   	 
   	  	
   	 	$.ajax({
   	 		type:"POST",
   	 		url: 'listCharacters.html',
   	 		dataType: "json",
   	 		success:function (data) {
	   	 		var items = [];
	   	 		var characterContainer = $('#characterContainer');
	   	 		$.each(data, function(index, character) {
	   	 			var characterDiv = document.createElement('div');
	   	 			characterDiv.setAttribute('class', 'character');
	   	 			// Header
		   	 		var header = document.createElement('h3');
		   	 		header.innerHTML = character.characterName;
		   	 		characterDiv.appendChild(header);
		   	 		var characterInfo = document.createElement('div');
		   	 		// Avatar
		   	 		var characterAvatar = document.createElement('div');
		   	 		characterAvatar.setAttribute('class', 'character-icon');
		   	 		characterAvatar.innerHTML = '<img src="/images/base-avatar.jpg" />';
		   	 		loadAvatar(character.characterName, characterAvatar);
		   	 		characterInfo.appendChild(characterAvatar);
		   	 		// Character stats
		   	 		var characterStats = document.createElement('div');
		   	 		characterStats.setAttribute('class', 'character-stats');
		   	 			var statsList = document.createElement('ul');
		   	 				var countRaids = document.createElement('li');
		   					countRaids.innerHTML = "Number of raids: " + character.countRaids;
		   					statsList.appendChild(countRaids);
		   					var countPasses = document.createElement('li');
		   					countPasses.innerHTML = "Number of passes: " + character.countPasses;
		   					statsList.appendChild(countPasses);
		   	 			characterStats.appendChild(statsList);
		   	 		characterInfo.appendChild(characterStats);
		   	 		// Character controls
			   	 	var characterControls = document.createElement('div');
			   	 	characterControls.setAttribute('class', 'character-controls');
		   	 			var makePrimaryButton = document.createElement('button');
	   	 				makePrimaryButton.setAttribute('class', 'character-primary');
	   	 				makePrimaryButton.innerHTML = 'Make primary';
	   	 				characterControls.appendChild(makePrimaryButton);
	   	 				if (character.isPrimary) {
	   	 					$(makePrimaryButton).button({disabled:true,icons:{primary:"ui-icon-check"}});
	   	 				} else {
	   	 					$(makePrimaryButton).button();
	   	 				}
		   	 			$(makePrimaryButton).click({buttonRef:makePrimaryButton},function(e) {
					   		$.get(   'changePrimary.html'
					   				,{characterId:character.characterId}
					   				,function (data) {
					   					$('.character-primary').removeClass('character-primary').button("enable").button("option","icons",{primary:null});
					   					$(e.data.buttonRef).addClass('character-primary').button("disable").removeClass('ui-state-focus')
					   						.removeClass('ui-state-hover').button("option","icons",{primary:"ui-icon-check"});
					   					addNotificationMessage("Successfully changed primary character", 1500);
					   				});
					  	});
			   	 		var deleteButton = document.createElement('button');
			   	 		deleteButton.setAttribute('class', 'character-delete');
			   	 		deleteButton.innerHTML = "Delete";
	   	 				characterControls.appendChild(deleteButton);
		   	 			$(deleteButton).button({icons:{primary:"ui-icon-close"}});
		   	 			$(deleteButton).click({characterId:character.characterId},function(e) {
		   	 				if (confirm('Do you really want to delete this character?')) {
			   	 				$.ajax({
			   			   	 		type:"GET",
			   			   	 		url: "deleteCharacter.html",
			   			   	 		data: {characterId:e.data.characterId},
			   			   	 		success:function (data) {
			   							
			   						}
			   			   	 	});
		   	 				}
		   	 			});
		   	 		characterInfo.appendChild(characterControls);

		   	 		characterDiv.appendChild(characterInfo);
	   	 			characterContainer.append(characterDiv);
	   	 		});
			}
   	 	});
      });

      function gotoLink(url) {
    	  window.location = url;
      }
      
      function showAddCharacter() {
    	  $('#addCharacterDialog').dialog('open');
      }
      
    </script>
    
    <style type="text/css">
    	.characterContainer
    </style>

  </head>
  <body>

    <jsp:include page="include/header.jsp" />
    
    <div class="main-content">
      <div style="float: right">
        <button id="addCharacterDialogButton">Add character</button>
      </div>
      	<h2>User Information</h2>
      	<div id="userInformationContainer">
      		<label for="userName">Username<input type="text" name="userName" id="userName" /></label>
      		<label for="userEmail">Email<input type="text" name="userEmail" id="userEmail" /></label>
      	</div>

	      <h2>Character List</h2>
	      <div id="characterContainer"></div>

    </div>
    
    <jsp:include page="include/footer.jsp" />
    
    <div id="addCharacterDialog" title="Add Character Raid">
      <form id="addCharacterForm" action="addProfile.html" method="post">
        <div class="row">
          <div class="label">Name:</div> 
          <div class="value"><input type="text" name="characterName" id="characterName" /></div>
          <div class="clear"></div>
        </div>
        
        <div class="row">
          <div class="label">Class:</div>
          <div class="value">
          	<select name="characterClass" id="characterClass">
          		<c:forEach var="c" items="<%=se.rkrantz.simpleraid.hibernate.domain.WowCharacter.Class.values() %>">
          			<option><c:out value="${c}" /></option>
          		</c:forEach>
          	</select>
          </div>
          <%--<input type="text" name="characterClass" id="characterClass" /> --%>
          <div class="clear"></div>
        </div> 
        <div class="row">
          <div class="label">Set as primary character:</div> 
          <div class="value"><input type="checkbox" name="primaryCharacter" id="primaryCharacter" value="true" /></div>
          <div class="clear"></div>
        </div>  
      </form>
    </div>
  
  </body>
</html>
